<template>
<div class="tab-header channel-tab-header clearfix">
    <ul class="tab-header-list pull-left">
        <li class="tab-header-item" 
            v-for="item in channels"
            :key="item.name"
            :class="{'active': item.name == activeName}"
        >{{item.text}}</li>
    </ul>
    <div class="follow-item pull-left">
        <span class="btn-follow">关注</span>
    </div>
</div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
        channels:[
            {name: 'video', text: '小视频', path: '/video'},
            {name: 'intro', text: '介绍', path: '/intro'},
            {name: 'rank',  text: '榜单', path: '/rank'},
            {name: 'prize', text: '在线抽奖', path: '/prize'},
        ],
        activeName: 'video'
    };
  },
  computed: {},
  methods: {},
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
.tab-header {
  height: 100px;
  font-size: 16px;
  line-height: 100px;
  background-color: #fff;
  .tab-header-list {
    width: 75%;
    display: flex;
  }

  .tab-header-item {
    color: #2a2a2a;
    position: relative;
    text-align: center;
    flex: 1;
    &.active{ 
      color: #1549eb; 
      &:after {
        content: '';
        width: 100%;
        height: 4px;
        position: absolute;
        left: 0;
        bottom: 0;
        background-color: #1549eb; 
      }  
    }

  }

  .follow-item {
    width: 25%;
    text-align: center;
    > .btn-follow {
      display: inline-block;
      width: 130px;
      height: 56px;
      line-height: 56px;
      color: #fff;
      background: linear-gradient(#103ee7, #318bff);
      border-radius: 28px;
    }
  }
}
</style>